<template>
  <div>
    <Transition name="mask">
      <div class="toast-mask" v-show="isShowError">{{ errorMsg }}</div>
    </Transition>

    <div class="root-reply-container2" v-for="(two,index) in replayChildren" :key="two.id">
      <!--Transition 删除框-->
      <Transition name="el-zoom-in-center">
        <div class="delete-mask" v-show="this.$store.state.isShowDeleteTwo == two.id">
          <div>
            <div class="delete-mask-div1">
              <span>删除评论后，评论下所有回复都会被删除是否继续?</span>
            </div>
            <div class="delete-mask-div2">
              <el-button type="primary" size="small" @click="deleteComment(two)">确认</el-button>
              <el-button plain size="small" @click="this.$store.commit('changeShowDeleteTwo')">取消</el-button>
            </div>
          </div>
        </div>
      </Transition>

      <div class="root-reply-avatar2">


        <!--头像-->
        <el-popover trigger="hover" placement="top" :width="320" popper-class="popperStyle">
          <template #reference>
            <div class="bili-avatar">
              <!--头像-->
              <img @click="$util.goPersonalHome(two.userId)" style="width: 30px;height: 30px;"
                   :src="two.avatar == '' ? '' : $util.url.load + two.avatar" alt="">
            </div>
          </template>
          <template #default>
            <div style="height: 180px;">
              <div style="height: 70px;"></div>
              <div style="height: 110px;">
                <div class="popper-avatar-lower">
                  <div class="root-reply-avatar">
                    <div class="bili-avatar" style="margin-top: 10px">
                      <!--头像-->
                      <img @click="$util.goPersonalHome(two.userId)" style="width: 40px;height: 40px;"
                           :src="two.avatar == '' ? '' :$util.url.load + two.avatar" alt="">
                    </div>
                  </div>
                  <div style="margin: 10px 10px 0 80px">
                    <p class="popper-avatar-p">{{two.nickName}}
                      <!--性别：男-->
                      <span v-if="two.sex === '1'" class="iconfont icon-xingbie1 popper-avatar-sex"></span>
                      <!--性别：女-->
                      <span v-else class="iconfont icon-xingbie popper-avatar-sex"></span>
                      <span>
                        <user-level :userlevel="(two.level === undefined||two.level === null)?'0':two.level"></user-level>
                      </span>
                    </p>
                    <ul class="popper-avatar-ul">
                      <li class="popper-avatar-li">{{two.followsChange === null?0:two.followsChange}} <span class="popper-avatar-span">关注</span></li>
                      <li class="popper-avatar-li">{{two.fansChange === null?0:two.fansChange}} <span class="popper-avatar-span">粉丝</span></li>
                      <li class="popper-avatar-li">1234 <span class="popper-avatar-span">获赞</span></li>
                    </ul>
                  </div>
                  <div class="popper-avatar-button">
                    <el-button size="small" type="primary">＋ 关注</el-button>
                    <el-button size="small">发消息</el-button>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-popover>
      </div>
      <div class="content-wrap" @mouseover="this.$store.commit('changeMenuIndex2',two.id)" @mouseout="this.$store.commit('outMenuShow')">
        <div class="user-info2">
          <!--nickname 用户名 up名-->
          <span class="layer-two-name" @click="$util.goPersonalHome(two.userId)">{{ two.nickName }}</span>
          <!--用户等级图标  暂时没有等级数据库-->
          <i class="iconfont icon-Lv5 layer-two-name" style="color: red;font-size: 20px;"></i>
          <!--回复@用户-->
          <span v-show="two.pid != two.originId" style="margin-left: 10px">回复
            <span @click="$util.goPersonalHome(two.userId)" class="aiteUser"> @{{ two.target }}: </span>
          </span>
          <span class="layer-two-talk" v-html="two.talkCopy"></span>
        </div>
        <div class="reply-info r-i-margin">
          <!--时间-->
          <span class="r-i-margin">{{ two.createdAtChange }}</span>
          <!--点赞图标-->
<!--          <i class="iconfont icon-dianzan hover-blue cursor-pointer"></i>-->
          <span class="iconfont icon-dianzan_selected hover-blue cursor-pointer" styleMark="false"
                @click="changeStyle('dianzan',index,two)" :ref="'dianzan'+index"></span>
          <!--点赞数-->
          <span style="margin-left: 5px">{{ (two.love===null||two.love===0||two.love==='0')?'':two.love }}</span>
<!--          <i class="iconfont icon-dianzan1 r-i-margin-l hover-blue cursor-pointer"></i>-->
          <span class="iconfont icon-dianzan_selected-copy r-i-margin-l hover-blue cursor-pointer" styleMark="false"
                @click="changeStyle('caizan',index,two)" :ref="'caizan'+index"></span>
          <span class="hover-blue r-i-margin-l cursor-pointer" @click="responseShow(two)">回复</span>
          <!--删除、举报按钮-->
          <div style="display: inline" v-show="two.id === this.$store.state.menuIndex2">
            <el-tooltip content="删除" placement="top">
              <span class="r-i-right hover-blue cursor-pointer"><i @click="this.$store.commit('changeShowDeleteTwo',two.id)" v-if="two.userId === this.$store.state.userInfo.userId" class="iconfont icon-shanchu"></i></span>
            </el-tooltip>
            <el-tooltip content="举报" placement="top">
              <span class="r-i-right hover-blue cursor-pointer"><i v-if="two.userId != this.$store.state.userInfo.userId" class="iconfont icon-jubao1"></i></span>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>

    <!--  共多少条回复, 大于3条的时候(不包括3), 才有必要显示。默认只显示前三条(但实际上已经请求第一页的数据,每页数据默认5条。如果超过一页,才显示分页。)-->
    <div v-if="replyTotalCount > initatePageSize && !showMoreReply" class="root-bottom-query colorStyle">
        共{{ replyTotalCount }}条回复, <span @click="showMore">点击查看</span>
    </div>

    <!-- 分页显示 -->
    <div class="bottom-page" v-if="showMoreReply && replyTotalCount > pageSize">
      <span class="spanDefault">共 {{totalPage}} 页</span>
      <div style="display: inline-block">
        <el-pagination small layout="prev, pager, next" @current-change="handleCurrentChange"
                       prev-text="上一页" next-text="下一页"
                       :total="replyTotalCount" :page-size="pageSize" hide-on-single-page>
        </el-pagination>
      </div>
    </div>

    <!--二级回复评论-->
    <div style="margin: 10px 0 10px 80px" v-show="this.$store.state.commentTwoShow === replayObj.id">
      <EmojiText @comment="commentReplayResult" :placeholder="replayObj == null? '':replayNickName" :emojiSize="20"></EmojiText>
    </div>
  </div>
</template>

<script>
import EmojiText from "@/components/detailComponent/EmojiText";
import {setCommentLike} from "@/util/utilNext";

export default {
  name: "CommentItem",
  components: {EmojiText},
  props: {
    toReplyTotalCount:{
      type:Number,
      default:0
    },
    toReplayChildren:{
      type:Array
    },
    commentId: {
      type: Number
    }
  },
  data(){
    return {
      isShowError: false,
      errorMsg: '',
      // 二级评论数组
      replayChildren:[],
      commentResp:'', /*回复评论*/
      //commentShow:null,
      // 暂存回复评论对象
      replayObj:{},
      replyTotalCount: 0,  /* 一级评论下共多少条回复 */
      showMoreReply: false, /* 是否显示更多的回复, 用来记录用户有没有点过查看更多回复 */
      pageNum: 1, /* 当前页 */
      pageSize: 5,/* 每页条数 */
      totalPage: 0, /* 总页数 */
      initatePageSize: 3, /* 评论初始数：页面最开始显示3条子评论 */
      templeTalk:'',
      // 父类传给子类的回复对象名
      replayNickName:'',
    }
  },
  created() {
    // 页面还未渲染时获取前三条评论（后端实现按点赞数、时间排序）
    this.firstGetCommentChildren()
  },
  watch:{
    "$store.state.latest": {
      handler:function(){
        this.getComment(1,3)
      }
    },
  },
  mounted() {

  },
  methods :{
    // TODO 点击delete-mask之外的其他地方，关闭delete-mask弹出框

    // 首次加载 数据来自父类
    firstGetCommentChildren(){
      if (this.toReplayChildren == undefined || this.toReplayChildren.length <= 0) return
      this.toReplayChildren.forEach(item => {
        // 解决follows、fans前后端类型不匹配问题
        item.followsChange = this.$util.numChange(item.follows)
        item.fansChange = this.$util.numChange(item.fans)
      })
      this.replayChildren = this.toReplayChildren
      this.replyTotalCount = parseInt(this.toReplyTotalCount+'')
      this.commentLikeUsersCommon('#00aeec','true')
    },

    /**公共方法*/
    commentLikeUsersCommon(color,real){
      let commentLikeUsers = this.$store.state.commentLikeUsers
      if(commentLikeUsers === undefined || commentLikeUsers.length <= 0) return
      let commentIdList = setCommentLike(this.replayChildren,commentLikeUsers)
      if (commentIdList === undefined || commentIdList.length <= 0) return
      // 该用户在当前评论数组中有点赞过某个评论
      for (let i = 0; i < this.replayChildren.length; i++) {
        for (let j = 0; j < commentIdList.length; j++) {
          if (commentIdList[j] === i){
            this.$nextTick(()=> {
              // 改变点赞样式
              eval('this.$refs.dianzan' + i)[0].style.color = color
              eval('this.$refs.dianzan' + i)[0].attributes[2].nodeValue = real
            })
          }
        }
      }
    },
    /*删除评论*/
    async deleteComment(two){
      let res = await this.$util.get('hilihili/comment/deleteComment', {id:two.id, originId:two.originId})
      // token过期，重新登录
      if (res.code == 401) {
        this.$store.commit('logout')
        this.$store.commit('changeLogView')
        return
      }
      if (res.code != 200){
        this.$store.commit('closeShowDelete')
        this.showErrorMsg("评论删除失败")
        return
      }else {
        // 移除评论数组
        this.replayChildren = this.replayChildren.filter(obj => obj.id != two.id)
        this.$store.commit('closeShowDelete')
        this.$store.commit('saveCommentTotal',this.$store.state.commentsChange-1)
        this.showErrorMsg("删除成功")
      }
    },

    // 显示信息
    showErrorMsg(msg) {
      this.errorMsg = msg
      this.isShowError = true
      setTimeout(() => {
        this.isShowError = false
      }, 2000)
    },
    /*父组件更新子组件replayChildren[]数据*/
    updateReplayChildren(obj){
      this.replayChildren = obj
    },

    /* 请求指定页的数据 */
    handleCurrentChange(currentPage) {
      this.pageNum = currentPage
      /* 请求完数据后, 直接将接口返回的list, 替换掉replayChildren[], 让vue处理列表渲染 */
      this.getComment(this.pageNum,this.pageSize)
    },

    /**分页*/
    async getComment(pageNum,pageSize) {
      let res
      // 获取评论数
      res = await this.$util.get('hilihili/comment/getCommentChildren' ,
          {videoId: this.$route.params.id, id: this.commentId ,startIndex: pageNum ,maxCount: pageSize,latest: this.$store.state.latest})
      if (res.code != 200) {
        console.log("获取子评论失败:",res.msg)
        return
      }
      if (res.data.replyTotalCount === 0) return
      if (res.data.childrenList===undefined||res.data.childrenList.length <= 0) return
      res.data.childrenList.forEach(item => {
        // 解决follows、fans前后端类型不匹配问题
        item.followsChange = this.$util.numChange(item.follows)
        item.fansChange = this.$util.numChange(item.fans)
      })
      this.replayChildren = res.data.childrenList
      this.replyTotalCount = parseInt(res.data.replyTotalCount+'')
      this.totalPage = Math.ceil(res.data.replyTotalCount / pageSize)
      // 发送分页请求后 修改点赞样式
      this.commentLikeUsersCommon('#00aeec','true')
    },
    /** 修改点赞踩赞样式*/
    changeStyle(str,id,item){
      if(this.$store.state.userInfo === undefined||this.$store.state.userInfo.userId === undefined) {
        this.showErrorMsg('您还未登录')
        return
      }
      if (str === 'caizan'){
        this.$nextTick(()=>{
          if (eval('this.$refs.'+str+id)[0] != undefined) {
            if (eval('this.$refs.dianzan'+id)[0].attributes[2].nodeValue === 'true'){
              // 取消点赞
              let data = this.updateLike(item,-1)
              if(data <= 1) return
              // 点赞数减一
              this.replayChildren[id].love = this.replayChildren[id].love-1
              eval('this.$refs.dianzan'+id)[0].style.color = 'rgb(148,153,160)'
              eval('this.$refs.dianzan'+id)[0].attributes[2].nodeValue = 'false'
            }
            if (eval('this.$refs.'+str+id)[0].attributes[2].nodeValue === 'false'){
              eval('this.$refs.'+str+id)[0].style.color = '#00aeec'
              eval('this.$refs.'+str+id)[0].attributes[2].nodeValue = 'true'
            }else {
              eval('this.$refs.'+str+id)[0].style.color = 'rgb(148,153,160)'
              eval('this.$refs.'+str+id)[0].attributes[2].nodeValue = 'false'
            }
          }
        })
      }else {
        //console.log("点赞逻辑")
        this.$nextTick(()=>{
          if (eval('this.$refs.'+str+id)[0] != undefined) {
            if (eval('this.$refs.caizan'+id)[0].attributes[2].nodeValue === 'true'){
              // 取消踩赞
              eval('this.$refs.caizan'+id)[0].style.color = 'rgb(148,153,160)'
              eval('this.$refs.caizan'+id)[0].attributes[2].nodeValue = 'false'
            }
            // 是否点赞
            if (eval('this.$refs.'+str+id)[0].attributes[2].nodeValue === 'false'){
              // 修改数据库
              let data = this.updateLike(item,1)
              if(data <= 1) return
              eval('this.$refs.'+str+id)[0].style.color = '#00aeec'
              eval('this.$refs.'+str+id)[0].attributes[2].nodeValue = 'true'
              // 点赞数加一
              this.replayChildren[id].love = this.replayChildren[id].love===null?1:parseInt(this.replayChildren[id].love)+1
              //console.log("新增点赞成功，执行sql条数：",data)
            }else {
              let data = this.updateLike(item,-1)
              if(data <= 1) return
              eval('this.$refs.'+str+id)[0].style.color = 'rgb(148,153,160)'
              eval('this.$refs.'+str+id)[0].attributes[2].nodeValue = 'false'
              this.replayChildren[id].love = this.replayChildren[id].love-1
              //console.log("删除点赞成功，执行sql条数：",data)
            }
          }
        })
      }
    },
    /**修改数据库点赞数*/
    async updateLike(item,setValue){
      let res = await this.$util.get('hilihili/comment/updateLike' ,{ videoId:this.$route.params.id, commentId:item.id, setValue})
      if (res.code != 200) {

        return
      }
      return res.data
    },

    /* 点击查看更多 */
    showMore() {
      this.showMoreReply = true
      // 如果子评论总数大于初始数 且 子评论总数小于等于每页条数时，查询所有子评论。否则 显示分页
      if (this.replyTotalCount > this.initatePageSize && this.replyTotalCount <= this.pageSize){
        this.getComment(this.pageNum,this.pageSize)
      }else {
        // 初始化分页第一页数据
        this.handleCurrentChange(1)
      }
    },


    // 回复评论 obj 对象信息
    responseShow(obj){
      if (this.$store.state.userInfo === undefined || this.$store.state.userInfo === ''){
        this.showErrorMsg("您还没有登录")
        return
      }
      this.replayObj = obj
      this.$store.commit('changeTwoComment',obj.id)
      // :placeholder="'回复: '+replayObj.nickName"
      this.replayNickName = '回复: '+obj.nickName
    },
    /* 子级评论回复子级评论 */
    commentReplayResult(content) {
      this.commentResp = content

      this.submitComment(true)
    },

    // 提交回复评论
    async submitComment(bool) {
      let res
      if (bool){// 二级评论
        if (!this.commentResp) return
        this.templeTalk = this.commentResp
        this.replayObj.talk = this.commentResp
        this.replayObj.createdAt = ''
        res = await this.$util.post('hilihili/comment/addComment', this.replayObj)
      }
      this.commentResp = ''
      // token过期，重新登录
      if (res.code == 401) {
        this.$store.commit('logout')
        this.$store.commit('changeLogView')
        return
      }
      if (res.code != 200) {
        console.log("获取子评论失败",res.code)
        return
      }
      let newComment = {
        id: res.data.id,
        userId: this.$store.state.userInfo.userId,
        avatar: this.$store.state.userInfo.avatar,
        nickName: this.$store.state.userInfo.nickName,
        createdAtChange: "刚刚",
        talkCopy: this.templeTalk,
        sex: this.$store.state.userInfo.sex,
        followsChange: this.$util.numChange(this.$store.state.userInfo.follows),
        fansChange: this.$util.numChange(this.$store.state.userInfo.fans),
        love:0,
        videoId : this.$route.params.id,
        pid: res.data.pid,
        originId: res.data.originId,
        target: this.replayObj.nickName
      }
      this.replayChildren.unshift(newComment)
      this.$store.commit('saveCommentTotal',this.$store.state.commentsChange+1)
      this.showErrorMsg("发送成功")
      // 完成评论关闭评论框
      this.$store.commit('outOneAndTwoComment')
    }
  },

}
</script>

<style>
/*修改el-popper样式 在<style scoped>中样式不生效*/
.el-popover.popperStyle{
  overflow: hidden;
  border-radius: 8px;
  background-image: url("/src/assets/img/avatar-top.jpg");
  background-size: 100%;
}
</style>
<style scoped>
.svgspan{
  width: 50px;
  height: 20px;
}
.popper-avatar-span {
  color: rgb(148, 153, 160);
}
.popper-avatar-lower {
  position: absolute;left: 0;height: 115px;width: 320px;background-color: #ffffff;
}
.popper-avatar-li {
  margin-right: 10px
}
.popper-avatar-ul {
  font-size: 13px;display: flex
}
.popper-avatar-button {
  position: absolute;top:75px; left:88px;
}
.popper-avatar-p {
  font-size: 16px;margin-bottom: 10px
}
.popper-avatar-sex {
  font-size: 12px;color: #00AEEC
}
.popper-avatar-level {
  margin-left: 5px;
  width: 25px;
  height: 16px;
}

.toast-mask {
  position: fixed;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 8px 12px;
  transform: translate(-50%, -50%);
  background: rgba(51, 51, 51, .8);
  border-radius: 4px;
  z-index: 3000;
  font-size: 14px;
  color: #fff;
}


/*删除框*/
.delete-mask{
  position: fixed;
  padding:15px 20px;
  width: 260px;
  height: 130px;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  text-align: center;
  transform: translate(-50%, -50%);
  background-color: rgb(255,255,255);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 4px;
  z-index: 9999;
  font-size: 14px;
}
.delete-mask-div1{
  height: 70%;
  width: 100%;
  display: block;
}
.delete-mask-div2{
  height: 30%;
  width: 100%;
  display: block;
  margin-top: 15px;
}
.root-bottom-query{
  margin: 10px 0 0 80px;
  font-size: 13px;
}
.bottom-page{
  margin: 10px 0 0 80px;
  font-size: 13px;
}
.spanDefault{
  margin-right: 10px;
  font-size: 13px;
  /*color: rgb(148, 153, 160);*/
  cursor: default;
}
.colorStyle {
  color: rgb(148, 153, 160);
}
.root-bottom-query span:hover{
  cursor:pointer;
  color: rgb(64, 197, 241);
}
.popover{
  position: absolute;
  right: 15px;
  width: 100px;
  text-align: center;
  border: 0;
  border-radius: 3px;
  box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}

.cursor-pointer{
  cursor:pointer;
}
.cursor-bgcolor:hover{
  background-color: rgb(241,242,243);
}
.reply-header {
  height: 30px;
  line-height: 30px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.nav-title-text {
  font-weight: 500;
  font-size: 20px;
  color: black;
}

.total-reply {
  font-size: 14px;
  margin-left: 10px;
  color: rgb(148, 153, 160);
}
.total-line{
  margin: 0 10px;
  font-size: 14px;
  color: rgb(148, 153, 160);
}
.total-change{
  font-size: 14px;
  color: rgb(148, 153, 160);
}
.main-reply-box {
  display: flex;
  height: 50px;
}


.reply-box-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 50px;
}

.bili-avatar {
  display: block;
  position: relative;
  background-image: url();
  background-size: cover;
  border-radius: 50%;
}

.bili-user-avatar {
  display: block;
  position: relative;
  background-size: cover;
  /* background-color: transparent; */
  border-radius: 50%;
  overflow: hidden;
  height: 40px;
  width: 40px;
}

.reply-box-wrap {
  position: relative;
  flex: 1;
}

.reply-box-textarea {
  font-size: 13px;
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  border: 1px solid var(--Ga1);
  border-radius: 6px;
  background-color: rgb(241, 242, 243);
  font-family: inherit;
  line-height: 38px;
  color: black;
  resize: none;
  outline: none;
}


.no-login-mask {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  font-size: 12px;
  background-color: rgb(241, 242, 243);
  cursor: pointer;
}

.no-login-span {
  padding-left: 5px;
  padding-right: 5px;
}


.no-login-btn {
  padding: 4px 9px;
  border-radius: 4px;
  color: white;
  background: rgb(0, 174, 236);
}

.no-login-btn:hover {
  background-color: rgb(64, 197, 241);
}

.reply-list {
  margin-top: 14px;
  padding-bottom: 100px;
}

.reply-end {
  margin-top: 20px;
  font-size: 13px;
  color: rgb(148, 153, 160);
  text-align: center;
  cursor: default;
}
.reply-end-style:hover{
  cursor: pointer;
  color: rgb(64, 197, 241);
}
.root-reply-container {
  padding: 22px 0 0 80px;
}
.root-reply-container2 {
  padding: 15px 0 0 130px;
}

.root-reply-item {
  position: relative;
}

.root-reply-avatar {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0px;
  width: 80px;
  cursor: pointer;
}
.root-reply-avatar2 {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 80px;
  width: 40px;
  cursor: pointer;
}

.root-reply-avatar .bili-avatar {
  width: 40px;
  height: 40px;
  overflow: hidden;
}
.root-reply-avatar2 .bili-avatar {
  width: 30px;
  height: 30px;
  overflow: hidden;
}

.content-wrap {
  position: relative;
  /*height: 20px;*/
}

.user-info {
  display: flex;
  align-items: center;
  /*margin-bottom: 4px;*/
  font-size: 13px;
}

.user-info2{
  align-items: center;
  /*margin-bottom: 4px;*/
  font-size: 13px;
}
.aiteUser{
  cursor: pointer;
  color: rgb(0,138,197)
}
.aiteUser:hover{
  color: rgb(62,191,234)
}
.layer-two-name{
  font-weight: 500;
  margin-right: 5px;
  color: rgb(148, 153, 160);
  /*只有六级用户才是红色*/
  /*color: rgb(251, 114, 153);*/
  cursor: pointer;
}
.layer-two-talk{
  font-size: 15px;
  line-height: 24px;
  /*padding: 2px 0;*/
  color: black;
  letter-spacing:1px;
}
.user-name {
  font-weight: 500;
  margin-right: 5px;
  color: rgb(148, 153, 160);
  /*只有六级用户才是红色*/
  /*color: rgb(251, 114, 153);*/
  cursor: pointer;
}

.root-reply {
  font-size: 15px;
  line-height: 24px;
  padding: 2px 0;
  color: black;
  letter-spacing:1px;
}

.reply-info {
  /*margin-top: 2px;*/
  font-size: 13px;
  line-height: 24px;
  color: rgb(148, 153, 160)
}
.r-i-margin{
  margin-right: 20px;
}
.r-i-margin-l{
  margin-left: 20px;
}
.r-i-right{
  float: right;
  cursor:pointer;
}
.bottom-line {
  margin-left: 80px;
  border-bottom: 1px solid #ccc;
  margin-top: 14px;
}

.reply-box-send {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 70px;
  margin-left: 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}
.send-text {
  color: #fff;
}

.no-login-box-send {
  background-color: #f1f2f3;
  cursor: not-allowed;
}

.no-login-send-text {
  color: rgb(148, 153, 160);
}
</style>
